<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef"  @selection-change="selectChange">
      <template #tableAfterButtons>
        <a-button
            @click="batchAudit"
            type="outline"
            status="success"
        ><template #icon><IconExperiment /></template>批量审核</a-button>
      </template>

      <template #member="{ record }">
        <div class="flex items-center justify-start">
          <text class="text-xs flex align-center">{{ record.member.nickname }}</text>
        </div>

      </template>

      <template #form_data="{ record }">
        <div class="flex items-center justify-start" v-if="record.form_data">
          <div class="form_info" v-for="(form,idx) in record.form_data">
            <a-image  class="w-50px h-50px" style="width: 50px;height: 50px" v-if="form.form_type==2" :src="form.val ? $tool.showFile(form.val):''" />
            <text v-if="form.form_type==3" class="text-xs ml-1 flex align-center">{{ form.val }}</text>
          </div>

        </div>
      </template>

      <template #ext="{ record }">
        <div class="flex  flex-col justify-start" v-if="record.ext">
          <div v-for="(form,idx) in record.ext" class="text-left flex justify-start">
            <a-image  class="w-50px h-50px" style="width: 50px;height: 50px" v-if="form.form_type==2" :src="form.val ? $tool.showFile(form.val):''" />
            <text v-if="form.form_type==3" class="text-xs flex ">{{ form.val }}</text>
          </div>
        </div>
      </template>

      <template #operationBeforeExtend="{ record }">
        <a-link @click="audit(record)" v-if="record.status == 0"><icon-arrow-up /> 审核</a-link>
      </template>
    </ma-crud>

    <a-modal
        v-model:visible="visible"
        @ok="doApplyAudit"
        @cancel="approveClose"
        okText="审核" cancelText="关闭"
        unmountOnClose
        draggable
    >
      <template #title>
        {{ curRecord?.act_info?.name || '批量审核'}}
      </template>
      <div>
        <div class="flex items-center justify-between" v-if="curRecord?.form_data">
          <div class="form_info " v-for="(form,idx) in curRecord.form_data">
            <a-image  width="180px" v-if="form.form_type==2" :src="form.val ? $tool.showFile(form.val):''" />
            <text v-if="form.form_type==3" class="text-xs ml-1 flex align-center">{{ form.val }}</text>
          </div>
        </div>

        <a-form :model="approveForm">
          <a-form-item field="remark" label="审核备注">
            <a-input v-model="approveForm.remark" placeholder="拒绝时请填写拒绝原因"/>
          </a-form-item>
          <a-form-item field="status" label="审核结果">
            <a-radio-group v-model="approveForm.status" :options="[{ label: '通过', value: 1 },{ label: '拒绝', value: 2 }]" />
          </a-form-item>
        </a-form>

        <div v-if="curRecord?.ori_price">原始单价：<span class="mr-2">{{curRecord?.ori_price}}</span> 等级价格：<span>{{curRecord?.price}}</span></div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import api from '@/api/prm/activity_submit.js'
import { Message } from '@arco-design/web-vue'

//选中项
const selecteds = ref([])

const crudRef = ref(null)

//设置选中项
const selectChange = (val) => selecteds.value = val
//审核弹窗
const visible = ref(false);
//审核表单
const approveForm = ref({applyId:0,remark:'',status:1});

const curRecord = ref({})
const audit = async (record) => {
  approveForm.value.applyId = record.id
  curRecord.value = record
  visible.value = true;
}
const batchAudit = async () => {
  console.log(selecteds.value);

  if (selecteds.value.length === 0) {
    Message.error('至少要选择一条数据')
    return
  }

  approveForm.value.applyId = selecteds.value
  visible.value = true;
}

const approveClose = () => {
  visible.value = false;
  curRecord.value = {}
}
//执行审核
const doApplyAudit = async () => {

  let response
  response = await api.applyAudit(approveForm.value)

  response.success && Message.success(response.message)

  crudRef.value.refresh()
}

//表格
const crud = reactive({
  api: api.applyList,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 100,
  searchColNumber:4,
  add: {show: false},
  edit: {show: false},
  delete: {show: false,},
  formOption: {viewType: 'modal'},
  beforeOpenAdd: () => {
    return true
  },
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: false},
  {
    title: '活动名称', dataIndex: 'activity_id', search: true, width: 80,
    formType: 'select', dict: { url: 'prm/activity/allList', props: { label: 'name', value: 'id' }, translation: true,pageSize:50,openPage:false },
  },
  {
    title: '原始单价', dataIndex: 'ori_price', formType: 'input', addDisplay: false, editDisplay: false, search: false, width: 50,
  },
  {
    title: '等级价格', dataIndex: 'price', formType: 'input', addDisplay: false, editDisplay: false, search: false, width: 50,
  },
  {
    title: '会员信息', dataIndex: 'member', formType: 'input', addDisplay: false, editDisplay: false, search: false, width: 100,
  },
  {
    title: '账号名称', dataIndex: 'account_name', formType: 'input', width: 80, search: true
  },
  {
    title: '账号ID', dataIndex: 'account_id', formType: 'input', width: 140, search: true
  },
  {
    title: '表单信息', dataIndex: 'form_data', formType: 'input', width: 200, search: false
  },
  {
    title: '扩展信息', dataIndex: 'ext', formType: 'input', width: 200, search: false
  },
  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio', addDisplay: false, editDisplay: false,width:80,
    dict: {data: [{key: 0, title: '待审核'}, {key: 1, title: '通过'}, {key: 2, title: '拒绝'}], props: {label: 'title', value: 'key'}, translation: true},
  },
  {
    title: '提交时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: false, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:activity_submit'}
</script>

<style scoped>

</style>
